<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
</head>
<body>
    <div id="app">
        <div >
            <table>
                <tr>
                    <td>
                        <el-input v-model="searchForm.name" placeholder="名称模糊搜索" clearable size="small" style="width: 200px;"></el-input>
                    </td>
                    <td>
                        <button @click="search" type="button" class="el-button filter-item el-button--success el-button--small">
                            <i class="el-icon-search"></i><span>搜索</span>
                        </button>
                    </td>
                    <td>
                        <button v-if="showButtonAdd" @click="toAdd" type="button" class="el-button el-button--primary el-button--small">
                            <i class="el-icon-plus"></i><span>新增</span>
                        </button>
                    </td>
                </tr>
            </table>
        </div>

        <div style="margin-top: 5px;">
            <el-row :gutter="15">
                <!--角色管理-->
                <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
                    <el-card class="box-card" shadow="never">
                        <div slot="header" class="clearfix">
                            <span class="role-span">角色列表</span>
                        </div>
                        <el-table
                                :data="tableData"
                                style="width: 100%;margin-bottom: 20px;"
                                highlight-current-row
                                @current-change="handleCurrentChange"
                                v-loading="loading">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称">
                            </el-table-column>
                            <el-table-column label="说明" prop="remark">

                            </el-table-column>
                            <el-table-column
                                    label="创建时间">
                                <template slot-scope="scope">
                                    {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                                </template>
                            </el-table-column>

                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="toModify(scope.row)" type="primary" icon="el-icon-edit"
                                               size="mini" title="修改" v-if="showButtonUpdate"></el-button>
                                    <template v-if="scope.row.children == null">
                                        <el-button type="danger" icon="el-icon-delete" size="mini" title="删除"
                                                   @click="del(scope.row.id)" v-if="showButtonDelete"></el-button>
                                    </template>
                                </template>

                            </el-table-column>

                        </el-table>
                    </el-card>
                </el-col>
                <!-- 菜单授权 -->
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7" style="max-height: 600px; overflow: auto">
                    <el-card class="box-card" shadow="never">
                        <div slot="header" class="clearfix" >
                            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
                                <span class="role-span">菜单分配</span>
                            </el-tooltip>
                            <template v-if="currentRow !== null && currentRow.id !== undefined">
                                &nbsp;&nbsp;
                                <el-button type="primary" size="mini" @click="checkedAll(true)">全 选</el-button>
                                <el-button type="primary" size="mini" @click="checkedAll(false)">全不选</el-button>

                                <el-button
                                        v-if="showButtonUpdate"
                                        icon="el-icon-check"
                                        size="mini"
                                        style="float: right; padding: 6px 9px"
                                        type="primary"
                                        @click="saveMenus">保存</el-button>
                            </template>
                        </div>
                        <el-tree ref="menuTree" :data="menuTree" @check="checkedTree" :default-checked-keys="menuIds" node-key="id" :check-strictly="true" :props="defaultProps" show-checkbox></el-tree>
                    </el-card>
                </el-col>
            </el-row>

        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="55%">

            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-editForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="说明" prop="remark">
                    <el-input v-model="editForm.remark"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            searchForm: {
                name: "",
            },
            dialogVisible: false,
            dialogTitle: "",
            editForm: {
                id: ""
            },
            rules: {
                name: [{ required: true, trigger: 'blur', message: '名称不能为空' }],
            },
            loading: false,
            menus: [],
            menuTree: [],
            currentRow: {}, // 当前选中表格的行
            defaultProps: { children: 'children', label: 'name'},
            menuIds: [],
            menuMap: {} //保存角色的菜单，key角色id，value= 菜单列表
        },
        methods: {
            submitForm() {
                let that = this;
                myConfirm("确定提交？", function () {
                    showLoading("保存中....");
                    let url = BASE_PATH + "/role/update";
                    if (that.editForm.id === undefined || that.editForm.id === "") {
                        url = BASE_PATH + "/role/add";
                    }
                    Vue.delete(that.editForm, "createdTime");

                    myAjax({
                        type: "post",
                        url: url,
                        data: that.editForm,
                        isJson: true,
                        callback: function () {
                            hideLoading();
                            successMessage("提交成功！");
                            that.dialogVisible = false;
                            that.loadTableData();
                        }
                    })
                });
            },
            search(){
                this.loadTableData();
            },
            loadTableData(){
                let that = this;
                this.loading = true;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/role/list",
                    data: {
                        name: this.searchForm.name,
                        departmentId: this.searchForm.departmentId,
                        status: this.searchForm.status
                    },
                    callback: function (data) {
                        that.tableData = toTree(data);
                        that.loading = false;
                    }
                });
            },
            toModify(obj){
                this.dialogTitle = "编辑职位";
                this.editForm = JSON.parse(JSON.stringify(obj));
                this.dialogVisible = true;
            },
            toAdd(obj){
                this.dialogTitle = "新增职位";
                this.editForm = {
                    id: "",
                    name: "",
                };
                this.dialogVisible = true;
            },
            del(id) {
                let that = this;
                myConfirm("确定删除？", function () {
                    showLoading("保存中....");
                    let settings = {
                        type: "post",
                        url: BASE_PATH + "/role/delete",
                        data: {id : id},
                        callback: function () {
                            hideLoading();
                            successMessage("删除成功！");
                            that.loadTableData();
                        }
                    };
                    myAjax(settings);
                });

            },
            loadMenuTree() {
                let that = this;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/sys/menuList",
                    callback: function (data) {
                        that.menus = JSON.parse(JSON.stringify(data));
                        that.menuTree = toTree(data);
                    }
                });
            },
            handleCurrentChange(val) {
                let that = this;
                this.currentRow = val;
                if(val === null) {
                    return;
                }
                // 加载该角色的菜单
                myAjax({
                    type: "get",
                    data: {
                      id: val.id
                    },
                    url: BASE_PATH + "/role/detail",
                    callback: function (data) {
                        that.$refs.menuTree.setCheckedKeys([]);
                        let list = [];
                        for (let i = 0; i < data.length; i++) {
                            list.push(data[i].menuId)
                        }
                        that.menuIds = list;
                    }
                });

            },
            saveMenus() {
                let that = this;
                let checkedMenuIds = this.$refs.menuTree.getCheckedKeys();
                showLoading("提交中...");
                myAjax({
                    type: "post",
                    data: {
                        id: that.currentRow.id,
                        menuIds: checkedMenuIds
                    },
                    url: BASE_PATH + "/role/updateMenu",
                    callback: function () {
                        successMessage("提交成功！");
                        hideLoading();
                    }
                });
            },
            checkedTree (data) {
                let thisNode = this.$refs.menuTree.getNode(data.id); // 获取当前节点
                const keys = this.$refs.menuTree.getCheckedKeys(); // 获取已勾选节点的key值

                if (thisNode.checked) { // 当前节点若被选中
                    for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点
                        if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
                            thisNode = thisNode.parent;
                            keys.push(thisNode.data.id)
                        }
                    }
                }

                this.$refs.menuTree.setCheckedKeys(keys) // 将所有keys数组的节点全选中
            },
            checkedAll(val){
                if(val){  //全选
                    let ids = [];
                    for (let i = 0; i < this.menus.length; i++) {
                        ids.push(this.menus[i].id);
                    }
                    this.$refs.menuTree.setCheckedKeys(ids);
                } else {   //取消全选
                    this.menuIds = [];
                    this.$refs.menuTree.setCheckedKeys(this.menuIds);
                }
            }
        },
        created:function () {
            this.loadTableData();
            this.loadMenuTree();
            this.showButtonAdd = parent.checkPermissionByName("角色添加");
            this.showButtonUpdate = parent.checkPermissionByName("角色修改");
            this.showButtonDelete = parent.checkPermissionByName("角色删除");
        },
    })
</script>
</html>
